<template>
  <view>
    <view class="goods-info">
      <van-card desc="描述信息" title="商品标题" thumb="/static/homebottom.jpg" custom-class="bgc">
        <view slot="num">
          共2件 实付：3389.00
        </view>
      </van-card>
    </view>

    <!-- 物流信息 -->
    <view class="logistics-info">
      <view class="">
        <text class="left">物流公司:</text>
        <text class="right">圆通速递</text>
      </view>
      <view class="">
        <text class="left">快递单号:</text>
        <text class="right">YT1234567890123</text>
      </view>
      <view class="">
        <text class="left">收货地址:</text>
        <text class="right">四川省成都市高新区桂溪街道天府三街218号快乐小区2栋2单元22楼2号</text>
      </view>
      <view class="">
        <text class="left">收货人:</text>
        <text class="right">王哈哈</text>
      </view>
    </view>

    <!-- setup -->
    <view class="setup">
      <uni-steps :options="options" direction="column" :active="active" active-color="black"></uni-steps>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // setup 当前激活项
        active: 3,
        options: [{
          title: '快件已到达成都中转',
          desc: '2018-11-11'
        }, {
          title: '快件离开广州市场部已发往成都华阳',
          desc: '2018-11-12'
        }, {
          title: '快件离开佛山市场部已发往广州中转',
          desc: '2018-11-13'
        }, {
          title: '佛山市场部的快运供应链[13888888888]已揽收',
          desc: '2018-11-14'
        }, {
          title: '您的订单已发运；运单号是{SF123456789098}',
          desc: '2018-11-14'
        }, {
          title: '您的订单已派车，等待提货发运',
          desc: '2018-11-14'
        }, {
          title: '您的订单已经生效运作，等待调度',
          desc: '2018-11-14'
        }, {
          title: '订单已创建',
          desc: '2018-11-14'
        }]
      };
    }
  }
</script>

<style lang="scss">
  .goods-info {
    .bgc {
      background-color: white;
    }
  }

  .logistics-info {
    padding: 0 16px;
    width: 100%;
    height: 170px;

    view {
      font-size: 14px;
      display: flex;
      height: 40px;
      margin-top: 10px;

      .left {
        color: #8F9CA9;
        width: 100px;
      }

      .right {
        color: black;
      }


    }
  }

  .setup {
    margin-top: 40rpx;
  }
</style>